<template>
  <div class="settings-item knowledge-wapper">
    <div class="header">
      <div class="title">关联知识库</div>
      <div class="actions">
        <text-button type="normal" icon="md-add" @click="visible = true"
          >选择</text-button
        >
        <text-button
          type="normal"
          icon="ios-create-outline"
          @click="settingVisible = true"
          >参数</text-button
        >
      </div>
    </div>
    <div class="content">
      <div class="knowledge-list">
        <div
          class="knowledge-item"
          v-for="item in knowledgeList"
          :key="item.id"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
  <CommonDialog title="配置知识库" v-model="visible" :confirmLoading="loading">
    <Input
      search
      suffix="ios-search"
      placeholder="搜索"
      style="width: auto"
      @on-search="handleSearch"
    />
    <div class="setting-list">
      <div class="setting-item" v-for="(item, i) in filterDataList" :key="i">
        <div class="left-box">
          <div class="title">
            <Icon type="md-list-box" color="#2d8cf0" size="18" />
            {{ item.name }}
          </div>
          <div class="sub-text">{{ item.description }}</div>
        </div>
        <div class="right-box">
          <div
            class="remove-btn"
            v-show="knowledges.includes(item.id)"
            @click="handleKnowledgeRemove(item.id)"
          >
            已添加
          </div>
          <text-button
            type="add"
            v-show="!knowledges.includes(item.id)"
            @click="handleKnowledgeSelect(item.id)"
            >添加</text-button
          >
        </div>
      </div>
    </div>
    <template #footer>
      <Button @click="visible = false">取消</Button>
      <Button type="primary" @click="handleSelect">确认</Button>
    </template>
  </CommonDialog>
  <CommonDialog
    title="知识库检索设置"
    v-model="settingVisible"
    :confirmLoading="loading"
    :styles="{ top: '20px' }"
    width="700px"
  >
    <Form label-position="left" :label-width="160">
      <FormItem label="知识库拼装策略" prop="knowstrategy">
        <RadioGroup v-model="form.knowstrategy">
          <Radio :label="0">搜召回数量</Radio>
          <Radio :label="1">智能拼装</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="召回片段数" prop="segmentcount">
        <Slider
          v-model="form.segmentcount"
          :marks="FRAGMENT_MARKS"
          :min="1"
          :max="20"
          :step="1"
          show-input
        ></Slider>
      </FormItem>
      <FormItem label="知识库拼装最大长度" prop="maxasslength">
        <Slider
          v-model="form.maxasslength"
          :marks="LENGTH_MARKS"
          :min="1"
          :max="30720"
          :step="10"
          show-input
        ></Slider>
      </FormItem>
      <FormItem label="知识库范围判定" prop="determination">
        <RadioGroup v-model="form.determination">
          <Radio :label="0">搜索阈值</Radio>
          <Radio :label="1">搜索阈值+大模型判断</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="未在知识库处理" prop="notprocessing">
        <RadioGroup v-model="form.notprocessing">
          <Radio :label="0">大模型自有知识回复</Radio>
          <Radio :label="1">固定回复</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="展示回答来源" prop="ourcedisplay">
        <Switch v-model="form.ourcedisplay" />
      </FormItem>
      <FormItem label="多模态回复增强" prop="enhancement">
        <Switch v-model="form.enhancement" />
      </FormItem>
    </Form>
    <!-- <Tabs>
      <TabPane label="搜索方式" icon="ios-settings-outline">
        <div class="channel-item" :class="{active: searchIndex == i}" v-for="(item, i) in DEFAULT_SEARCH_OPTIONS" :key="i" @click="handleSearchSelect(i)">
          <div class="radio-btn"></div>
          <div class="channel-item-info">
            <div class="name">{{ item.name }}</div>
            <div class="description">{{ item.description }}</div>
          </div>
        </div>
        <div class="flex-between">
          <div class="label">结果重排</div>
          <Switch v-model="rearrange" />
        </div>
        <div class="rearrange-form" v-show="rearrange">
          <Form label-position="left" :label-width="120">
            <FormItem label="重排权重" prop="weight">
              <Slider v-model="rearrangeForm.weight" :min="0" :max="1" :step="0.01" show-input></Slider>
            </FormItem>
            <FormItem label="重排模型" prop="model">
              <Select v-model="rearrangeForm.model">
                <Option v-for="item in MODEL_OPTIONS" :value="item.id" :key="item.id">{{
                  item.name
                }}</Option>
              </Select>
            </FormItem>
          </Form>
        </div>
      </TabPane>
      <TabPane label="搜索过滤" icon="ios-link">搜索过滤</TabPane>
      <TabPane label="问题优化" icon="md-trending-up">问题优化</TabPane>
    </Tabs> -->
    <template #footer>
      <Button @click="settingVisible = false">取消</Button>
      <Button type="primary" @click="settingVisible = false ">确认</Button>
    </template>
  </CommonDialog>
</template>
<script setup>
import { ref } from 'vue';
import { myKnowledge } from '@/api/modules/knowledgeBase';
import CommonDialog from '@/components/CommonDialog/index.vue';
const props = defineProps({
  form: {
    type: Object,
    default: () => {}
  }
})
// 搜索方式选择项
const DEFAULT_SEARCH_OPTIONS = [
  {
    name: '语义检索',
    description: '使用向量进行文本相关性查询',
  },
  {
    name: '全文检索',
    description: '使用传统的全文检索，适合查找一些关键词和主谓语特殊的数据',
  },
  {
    name: '混合检索',
    description:
      '使用向量检索与全文检索的综合结果返回，使用 RRF 算法进行排序。',
  },
];

const FRAGMENT_MARKS = {
  1: '1',
  20: '20',
};

const LENGTH_MARKS = {
  1: '1',
  30720: '30720',
};

// 弹窗显示
const visible = ref(false);
const settingVisible = ref(false);
const loading = ref(false);
const dataList = ref([]);
const knowledges = ref([]);
const knowledgeList = ref([]);
const filterDataList = ref([]);
// 知识库搜索配置 - 搜索方式
const settingForm = ref({
  knowstrategy: 0,
  segmentcount: 5,
  maxasslength: 2000,
  determination: 0,
  notprocessing: 0,
  ourcedisplay: false,
  enhancement: false,
});

// 获取知识库列表
const getList = async () => {
  try {
    const { data } = await myKnowledge.list({ data: {} });
    dataList.value = data;
    filterDataList.value = data;
  } finally {
    loading.value = false;
  }
};
getList()
const handleSelect = () => {
  const temp = [];
  knowledges.value.map((knowledge) => {
    const item = dataList.value.find((k) => knowledge == k.id);
    temp.push(item);
  });
  knowledgeList.value = temp;
  props.form.knowledgemodel = knowledges.value.join(',');
  visible.value = false;
};
const handleKnowledgeSelect = (id) => {
  knowledges.value.push(id);
};
const handleKnowledgeRemove = (id) => {
  const index = knowledges.value.indexOf(id);
  knowledges.value.splice(index, 1);
};

const init = () => {
  knowledges.value = props.form.knowledgemodel.split(',');
  const temp = [];
  knowledges.value.map((knowledge) => {
    const item = dataList.value.find((k) => knowledge == k.id);
    temp.push(item);
  });
  knowledgeList.value = temp;
  console.log(knowledges.value,  knowledgeList.value)
}

const handleSearch = (e) => {
  if (!e) {
    filterDataList.value = dataList.value;
    return;
  }
  filterDataList.value = dataList.value.filter((item) => item.name.includes(e));
};

defineExpose({
  init
})
</script>
<style lang="scss" scoped>
.knowledge-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .knowledge-item {
    width: calc(50% - 10px);
    margin-bottom: 10px;
    border-radius: 8px;
    padding: 10px;
    box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px -2px,
      rgba(16, 24, 40, 0.06) 0px 2px 4px -2px;
    border: 1px solid rgb(223, 226, 234);
    cursor: pointer;
  }
}

.channel-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid;
  border-color: rgb(232, 235, 240);
  background-color: rgb(251, 251, 252);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  &:hover {
    border-color: #5e8fff;
  }
  &.active {
    border-color: #5e8fff;
    background-color: #e1eaff;
  }
}
.radio-btn {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgb(226, 232, 240);
}
.active .radio-btn {
  border-color: #5e8fff;
  box-shadow: rgba(51, 112, 255, 0.15) 0px 0px 0px 2.4px;
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #5e8fff;
  }
}
.channel-item-info {
  flex: 1;
  margin-left: 10px;
  .name {
    font-size: 14px;
    font-weight: 600;
  }
  .description {
    font-size: 12px;
    color: #666;
  }
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.setting-list {
  height: 50vh;
  overflow-y: auto;
}
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #eee;
  &:hover {
    background-color: rgb(251, 251, 252);
  }
  .remove-btn {
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    color: #ccc;
    background-color: #eee;
    font-size: 12px;
  }
}
</style>
